<template>
  <view class="search-container">
      <!-- 搜索输入框 -->
      <view class="search-box">
        <uni-search-bar radius="20" cancelButton="none" clearButton="auto" @input="input"></uni-search-bar>
      </view>
      <view v-if="resultList.length === 0 || keyWard === ''">
      <!-- 标题 -->
      <view class="search-title">
        <text>搜索</text>
        <uni-icons type="trash-filled" size="16" @click="clear"></uni-icons>
      </view>
      <!-- 搜索历史 -->
      <view class="search-history">
        <view class="history-item" v-for="(item,index) in history" :key="index" @click="gotoGoodsList(item)">
          {{item}}
        </view>
      </view>
    </view>
    <!-- 搜索结果 -->
    <view class="search-result" v-else>
      <view class="search-result-item" v-for="(item,index) in resultList" :key="index" @click="gotoGoodsDetail(item.goods_id)">
        <text>{{item.goods_name}}</text>
        <uni-icons type="forward" size="16"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.history = JSON.parse(uni.getStorageSync('history') || '[]')
    },
    methods: {
      gotoGoodsList(item){
        uni.navigateTo({
          url:'../goods_list/goods_list?query=' + item
        })
      },
      gotoGoodsDetail(goods_id){
        uni.navigateTo({
          url:'../goods_detail/goods_detail?goods_id=' + goods_id
        })
      },
      async getResultList(){
        if(this.keyWard === '') {
          this.resultList = []
        }
        const {data:res} = await uni.$http.get('/api/public/v1/goods/qsearch', {
          query: this.keyWard
        });
        console.log('搜索结果：', res)
        if(res.meta.status !== 200) return uni.$showMsg()
        this.resultList = res.message
      },
      clear() {
        this.history = []
        uni.setStorageSync('history', '[]')
      },
      input(e) {
        // 清除timer
        clearTimeout(this.timer)
        // 把输入的内容存在history中
        //输入停顿一秒再把内容存入history
        this.timer = setTimeout(() => {
          this.keyWard = e.value
          if (e.value) {
            console.log('获取结果值：',this.getResultList())
            const set = new Set(this.history.reverse())
            set.delete(e.value)
            set.add(e.value)
            this.history = Array.from(set).reverse();
            // 持久化到本地
            uni.setStorageSync('history', JSON.stringify(this.history))
          }
        }, 1000);
      },
    },
    data() {
      return {
        history: [],
        timer: {},
        resultList:[],
        keyWard: '',
      };
    }
  }
</script>

<style lang="scss">
  .search-container {
    .search-box {
      height: 100rpx;
      background-color: #C00000;
      padding: 10rpx 10rpx;
    }

    .search-title {
      padding: 10rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #000000;
    }

    .search-history {
      display: flex;
      flex-wrap: wrap;

      .history-item {
        padding: 20rpx;
        margin: 20rpx;
        background-color: #F5F5F5;
        font-size: 12px;
      }
    }

    .search-result {
      .search-result-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 10rpx;
        border-bottom: 1rpx solid #C0C0C0;
        text{
          //文字不换行
          white-space: nowrap;
          // 溢出部分隐藏
          overflow: hidden;
          // 隐藏部分显示三个小点
          text-overflow: ellipsis;
          margin-right: 6rpx;
          font-size: 12px;
        }
      }
    }
  }
</style>
